<template>
	<view class="container index-container">
		<view class="top">
			<view class="search-box">
				<view class="search-input">
					<uni-search-bar radius="24" placeholder="搜索医生" bgColor="#FFFFFF" @cancel="search"
						clear-button="none" cancel-text="搜索">
					</uni-search-bar>
				</view>
				<!-- <view class="bell-box">
					<uni-badge type="error" :is-dot="true" text="1" absolute="rightTop" size="small">
						<view class="iconfont bell">&#xe61a;</view>
					</uni-badge>
				</view> -->
			</view>
			<view class="navigator">
				<text class="title">健康咨询</text>
				<view class="main-zone">
					<navigator open-type="navigate" url="/pages/index/department">
						<view class="main-icon">
							<image :src="$fileUrl+'asset/fst.png'"></image>
							<text>按科室</text>
						</view>
					</navigator>
					<navigator open-type="navigate" url="/pages/index/department">
						<view class="main-icon">
							<image :src="$fileUrl+'asset/sco.png'"></image>
							<text>按疾病</text>
						</view>
					</navigator>
					<navigator open-type="navigate" url="/pages/index/department">
						<view class="main-icon">
							<image :src="$fileUrl+'asset/thr.png'"></image>
							<text>按机构</text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="secondary-navigator">
			<view class="main-zone">
				<view class="main-icon" v-for="(item,i) in secondaryIcons" :key="i">
					<navigator :url="item.path" open-type="navigate">
						<image class="secondary-img" :src="item.icon"></image>
						<text>{{item.title}}</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="banner-box">
			<swiper class="swiper" circular :indicator-dots="swiperOption.indicatorDots"
				:autoplay="swiperOption.autoplay" :interval="swiperOption.interval" :duration="swiperOption.duration">
				<swiper-item v-for="(item,i) in 3" :key="i">
					<view class="swiper-item">
						<image :src="$fileUrl+'swiper.png'"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="selction-box">
			<view class="selctions">
				<view v-for="(item, index) in tabs" :key="index" class="box-s"
					:class="{ selected: activeIndex === index }" @click="switchTab(index)">
					{{ item }}
				</view>
			</view>
			<view class="selction-list-box">
				<scroll-view class="tab-one" :scroll-y="true" :show-scrollbar="false" @scrolltolower="test"
					v-if="activeIndex == 0">
					<view class="item-box" v-for="(item,i) in doctorList" :key="item.userId"
						@click="jumpDoctor(item.id)">
						<view class="item">
							<image :src="item.headPortrait" mode="aspectFill"
								style="border-radius: 8rpx; flex-shrink: 0;"
								@error="$handleImageError(item,'headPortrait')"></image>

							<view class="text-box">
								<view class="belong">{{item.placeOrganizationName}}</view>
								<view class="doctor-name">
									<text>{{item.name}}</text>
									<text class="perf type-1">{{item.job}}</text>
								</view>
								<view class="bility">
									<text v-for="adept in item.adeptIllnessArr" :key="adept.id">{{adept.name}}</text>
								</view>
							</view>
							<view class="iconfont arrow-right">&#xe6ab;</view>
						</view>
					</view>
				</scroll-view>

				<scroll-view class="tab-one" :scroll-y="true" :show-scrollbar="false" @scrolltolower="test"
					v-if="activeIndex == 1">
					<view class="item-box" v-for="(item,i) in goodsList" :key="item.id" @click="jumpGoods(item.id)">
						<view class="item">
							<image :src="item.picture" style="border-radius: 8rpx;flex-shrink: 0;" mode="aspectFill"
								@error="$handleImageError(item,'picture')"></image>
							<view class="text-box">
								<view class="belong">{{item.placeOrganizationName}}</view>
								<view class="doctor-name">
									<text>{{pageCountChars(item.name,15)}}</text>
									<!-- <text class="perf type-1">健康理疗师</text> -->
								</view>
								<view class="bility">
									<text class="c-danger">{{$toYuan(item.price)}}元</text>
								</view>
							</view>
							<view class="yuan-btn btn-primary" style="font-size: 28rpx;height: 60rpx;width: 160rpx;">
								点击购买</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <image class="pop" :src="$fileUrl+'asset/pop.png'" v-show="showFloatButton"></image> -->
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onPageScroll } from "@dcloudio/uni-app"
	import { onMounted, ref, reactive } from "vue";
	import api from "../../common/api";
	import { countChars, hideLoading, setStorage, showLoading } from "../../common/util";
	import { jump } from "../../untils/tools";
	import config from "@/common/config.js"

	interface menuItem {
		icon : any,
		title : string,
		path : string
	}
	const secondaryIcons = reactive<menuItem[]>([
		{
			icon: config.fileUrl + 'asset/中医馆.png',
			title: '中医馆',
			path: '/pages/index/clinic/clinic?menuIndex=0'
		},
		{
			icon: config.fileUrl +'asset/社区医馆.png',
			title: '社区医馆',
			path: '/pages/index/clinic/clinic?menuIndex=1'
		},
		{
			icon: config.fileUrl +'asset/口腔门诊.png',
			title: '口腔门诊',
			path: '/pages/index/clinic/clinic?menuIndex=2'
		},
		{
			icon: config.fileUrl +'asset/养老中心.png',
			title: '养老中心',
			path: '/pages/index/clinic/clinic?menuIndex=3'
		},
		{
			icon: config.fileUrl +'asset/体检中心.png',
			title: '体检中心',
			path: '/pages/index/clinic/clinic?menuIndex=4'
		},
		{
			icon: config.fileUrl +'asset/健康档案.png',
			title: '健康档案',
			path: '/pagesChat/files/index'
		},
		{
			icon: config.fileUrl +'asset/健康管家.png',
			title: '健康管家',
			path: '/pagesChat/butler/index'
		},
		{
			icon: config.fileUrl +'asset/自营商城.png',
			title: '自营商城',
			path: ''
		},
		{
			icon: config.fileUrl +'asset/就医助手.png',
			title: '就医助手',
			path: '/pagesChat/assistant/index'
		},
		{
			icon: config.fileUrl +'asset/福利中心.png',
			title: '福利中心',
			path: '/pagesUser/coupon/coupon'
		},

	])
	const swiperOption = {
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500
	}
	const tabs = ['医生推荐', '好物推荐', '健康科普'];
	let activeIndex = ref<number>(0); // 默认选中第一个

	const kw = ref<string>('')
	const search = (e) => {
		console.log(e);
	}
	const switchTab = (index : number) => {
		activeIndex.value = index
	}
	const test = () => {
		console.log('滚到到底了');
	}
	let showFloatButton = ref<boolean>(true)
	onPageScroll((e : any) => {
		if (e.scrollTop < 250) {
			showFloatButton.value = true
		} else {
			showFloatButton.value = false
		}
	})

	const goDetail = () => {
		jump('/pages/index/clinic/clinicDetail?name=锦弘中医馆')
	}
	const pageCountChars = (text, len) => {
		return countChars(text, len)
	}
	const pageId = ref('')
	const pageType = ref('')
	onLoad((options) => {
		pageId.value = options.id;
		pageType.value = options.type;
	})
	onMounted(async () => {
		getDoctorList()
		getGoodsList()
		if (pageType.value === 'invite') {
			//邀请分享 保存分享人Id
			setStorage('inviteShareId', pageId.value)
			return
		}
	})

	const doctorList = ref([])
	const getDoctorList = async () => {
		showLoading()
		try {
			const res = await api.recommendDoctorInfo()
			const data = res.data || []
			const list = data.map((item) => {
				return {
					...item,
					adeptIllnessArr: JSON.parse(item.adeptIllness)
				}
			})
			doctorList.value = list
		} finally {
			hideLoading()
		}
	}
	const jumpDoctor = (id) => {
		uni.navigateTo({ url: '/pages/index/clinic/doctorDetail?id=' + id })
	}
	const goodsList = ref([])
	const getGoodsList = async () => {
		showLoading()
		try {
			const res = await api.recommendGoodsInfo()
			const data = res.data || []

			goodsList.value = data
		} finally {
			hideLoading()
		}
	}
	const jumpGoods = (id) => {
		wx.navigateToMiniProgram({
			appId: '',
			path: '/pages/category/goodsDetail?id=' + id,
			success(res) {
				// 打开成功
			}
		})
	}
</script>

<style lang="scss">
	.index-container {
		background-color: #F5F6FA;

		.top {
			padding: 20rpx;
			background: linear-gradient(175deg, #DBFFFB 0%, #D9EFFD 56%, #D7E5FF 66%, #F5F6FA 100%);
		}

		.naviBar {
			text-align: center;
		}

		.search-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.search-input {
				flex: 1;

				.uni-searchbar {
					.uni-searchbar__cancel {
						z-index: 10;
						padding: 0;
						position: absolute;
						right: 10rpx;
						color: #FFFFFF;
						background-color: #3AD3C1;
						border-radius: 50rpx;
						width: 120rpx;
						text-align: center;
					}
				}
			}

			.bell-box {
				display: inline-block;
				padding: 20rpx;

				.bell {
					font-size: 64rpx;
				}
			}

		}

		.navigator {
			background-color: #FFFFFF;
			border-radius: 12rpx;

			.title {
				color: #FFFFFF;
				display: block;
				padding: 14rpx;
				background-image: url('/static/title-bg.png');
				background-repeat: no-repeat;
				background-size: 26% 85%;
			}

			.main-zone {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 30rpx 20rpx;
				padding-top: 0;

				image {
					width: 120rpx;
					height: 120rpx;
					margin: 20rpx;
				}


				.main-icon {
					text-align: center;

					text {
						display: block;
						font-size: 32rpx;
						font-weight: bold;
						color: #222;
					}
				}
			}
		}

		.secondary-navigator {
			.main-zone {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 20rpx;
				flex-wrap: wrap;

				.main-icon {
					text-align: center;

					text {
						display: block;
						font-size: 24rpx;
						color: #383838;
						font-weight: bold;
					}

					width: 20%;
					padding: 10rpx 0;
				}
			}

			image {
				width: 90rpx;
				height: 90rpx;
			}
		}

		.banner-box {
			padding: 24rpx;

			.swiper {
				height: 160rpx;
			}

			.swiper-item {
				display: block;
				height: 160rpx;
				line-height: 160rpx;
				text-align: center;

				image {
					width: 100%;
					height: 160rpx;
				}
			}
		}

		.selction-box {
			background-color: #FFFFFF;


			.selctions {
				display: flex;
				font-size: 30rpx;
				font-weight: bold;
				padding: 0 10rpx;

				.box-s {
					padding: 18rpx 50rpx;
					transition: all 0.3s ease;
					border: 1px;
					position: relative;

					&::after {
						content: "";
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 6rpx;
						background-color: #3AD3C1;
						transform: scaleX(0);
						/* 初始缩放为0 */
						transform-origin: left center;
						/* 从左侧开始扩展 */
						transition: transform 0.3s ease;
					}
				}

				.selected {
					color: #3AD3C1;

					&::after {
						transform: scaleX(1);
						/* 悬停时恢复原宽度 */
					}
				}
			}

			.selction-list-box {
				background-color: #F5F6FA;
				// min-height: 660rpx;
				// height: 960rpx;
				padding: 24rpx;

				.tab-one {
					min-height: 660rpx;
					height: 960rpx;

					// padding: 24rpx;
					.item-box {
						margin-bottom: 20rpx;
						padding: 16rpx;
						background-color: #ffffff;
						;
						border-radius: 16rpx;
						box-shadow: 0 0 2rpx 2rpx #e5e5e5;

						.item {
							display: flex;
							align-items: center;
							justify-content: space-between;

							image {
								width: 220rpx;
								height: 220rpx;
							}

							.text-box {
								flex: 1;
								padding: 20rpx;
								display: inline-block;

								.belong {
									color: #202020;
									font-size: 32rpx;
									font-weight: 600;
								}

								.doctor-name {
									padding: 20rpx 0;
									color: #6D6D6D;

									text:nth-child(1) {
										margin-right: 10rpx;
									}

									.perf {
										border-radius: 4rpx;
										padding: 5rpx 10rpx;
										font-size: 24rpx;
									}

									.type-1 {
										background-color: rgba(73, 212, 139, 0.20);
										color: #49D48B;
									}

									.type-2 {
										background-color: #F8A92A;
										color: #F8A92A;
									}
								}

								.bility {
									text {
										padding: 5rpx;
										background-color: #F4F6FA;
										font-size: 24rpx;
										margin-right: 10rpx;
										border-radius: 4rpx;
										color: #5C6067;
									}
								}
							}

							.arrow-right {
								color: #56E0D3;
								font-size: 45rpx;
								display: inline-flex;
								/* 启用 Flex 布局 */
								flex-direction: column;
								/* 垂直排列 */
								align-items: center;

								/* 水平居中 */
								&::after {
									content: "立即咨询";
									font-size: 24rpx;
									margin-top: 8rpx;
									letter-spacing: 2rpx;
									transform: scale3d(0.9, 0.9, 1);
									/* 文字与箭头的间距 */
								}
							}
						}

					}
				}
			}
		}
	}

	.pop {
		width: 160rpx;
		height: 160rpx;
		position: fixed;
		right: 0;
		bottom: 160rpx;
		z-index: 10;
	}
</style>